<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>xxxx</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .xx {
            /* 6/6s基准的设计稿，设计稿标注为宽度176px，高度为234px，设置176/100=1.76rem ,234/100=2.34rem,8/100=0.08rem */
            width: 1.76rem;     
            height: 2.34rem;
            background: #4B505F;
            border-radius: 0.08rem;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="xx"></div>
    </div>


    <script>
        /*1.设置视口 <meta name="viewport"
                              content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">*/
        /*2.设置font-size*/
        //如果屏幕大于750（750是根据我效果图(psd)设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
        //设置根元素font-size大小
        /*750是根据效果图(psd)宽度设置，具体数值参考效果图,然后假如需要设置元素的高度宽度就用单位rem,
                * 比如 然后px转rem就除以100  1rem=100px;
                * .box{
                        width: 200px -->2rem;  效果图(psd)元素宽度高度为200px,那么转换成为rem单位就是2rem
                        height: 200px  -->2rem;  效果图(psd)元素宽度高度为200px,那么转换成为rem单位就是2rem
                         font-size: 18px  -->0.18rem;
                        background-color:red
                        }
            //屏幕大小改变，或者横竖屏切换时，触发函数
            //文档加载完成时，触发函数
            */
        fnResize()
        window.onresize = function () {
            fnResize()
        }

        function fnResize() {
            var deviceWidth = document.documentElement.clientWidth || window.innerWidth
            if (deviceWidth >= 750) {
                deviceWidth = 750
            }
            if (deviceWidth <= 320) {
                deviceWidth = 320
            }
            document.documentElement.style.fontSize = (deviceWidth / 750) * 100 + 'px';
        }
    </script>
</body>

</html>